<style scoped lang="less">
	.line{background: #FAFAFA;height: 0.27rem}
	.cemetery-view{
		.view-banner{
			position: relative;
			height:6.03rem;
			width:100%;
			.page{
				padding: 0 0.27rem;
				height: 0.53rem;
				line-height: 0.53rem;
				background: rgba(0,0,0,0.40);
				border-radius: 1.33rem;
				position: absolute;
				right: 0.32rem;
				bottom: 0.32rem;
				z-index: 5;
				color:rgba(255,255,255,0.88);
				font-size: 0.32rem;
			}
		}
		.view-banner>ul>li{
			text-align: center;
			overflow: hidden;
			width: 100%;
		}
		.view-banner img{
			max-width: 100%;
			max-height: 100%;
		}
		.cemeteryFixed{
			position: fixed;
			bottom: 0.53rem;
			right: 0.53rem;
			div{
				background: #FFF3E8;
				border: 0.05rem solid #FFFFFF;
				box-shadow: 0 0 6px 0 rgba(114,114,114,0.53);
				width: 1.07rem;
				height: 1.07rem;
				margin-bottom: 0.37rem;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				img{
					width: 60%;
					height: 60%;
				}
			}
		}
		/**/
		.cemeteryData{
			.title{
				width: 100%;
				height: 1.63rem;
				background-image: linear-gradient(-406deg, #FFAC12 0%, #FD5286 100%);
				box-shadow: 4px 4px 6px 0 rgba(220,128,107,0.30);
				position: relative;
				margin-bottom: 0.64rem;
				z-index: 5;
				.logo{
					position: absolute;
					left: 0.48rem;
					top:-0.96rem;
					width: 2.13rem;
					height: 2.13rem;
					border-radius: 50%;
					background-color: rgba(255,255,255,0.3);
					display: flex;
					justify-content: center;
					align-items: center;
					div{
						width: 1.72rem;
						height: 1.72rem;
						background-color: rgba(255,255,255,1);
						border-radius: 50%;
						img{
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}			
				}
				p{
					line-height: 1.63rem;
					font-size: 0.53rem;
					color:#fff;
					padding-left: 29.3%;
					white-space:nowrap;
					text-overflow:ellipsis;
					overflow:hidden;
				}
			}
		}

	}
	

</style>
<style lang="less">
	.cemeteryData{
		.contents{
			padding: 0 0.52rem 0.52rem ; 
			img{
				max-width: 100%!important;
				height: auto!important;
			}
			video{
				max-width: 100%!important;
				height: auto!important;
			}
		}
	}
</style>

<template>
    <!--主视图-->
    <div class="cemetery-view">
        <!--banner-->
        <div class="view-banner">
            <swiper :options="swiperOption">
                <swiper-slide v-for="(items,index) in cemeteryShowPicList">								
                    <img :src="imgurl+items" class="photo_" bh="1"/>					      
                </swiper-slide>
            </swiper>
			<p class="page">
				<span>{{ (cemeteryShowPicList.length==0) ? 0 : activeIndex}}</span> / {{cemeteryShowPicList.length}}
			</p>
        </div>
		<!-- 电话和定位信息 -->
		<div class="cemeteryFixed">
			<a :href="'tel:'+cemeteryTel" class="call-phone"><div><img class="phone" src="../../images/phone-aboutCemetery-phone.png" alt=""></div></a>
			<div @click="goMap"><img class="address" src="../../images/phone-aboutCemetery-address.png" alt=""></div>			
		</div>
        <!-- 陵园信息 -->
		<div class="cemeteryData">
			<div class="title">
				<div class="logo">
					<div><img :src="logoPath ? imgurl+logoPath : require('../../images/phone-qx6.png') " alt=""></div>
				</div>
				<p>{{cemeteryName}}</p>
			</div>
			<div class="contents" v-html="profiles">
			</div>
			
		</div>
    </div>
</template>
<script>
   	import global from '../../config/global'
    import { mapState } from 'vuex'
    import '../../js/flexible.debug.js'
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    export default {
		data(){
			return{
                hosturl:global.host,
                imgurl:global.imgurl,
				cemeteryName:"",
				cemeteryShowPicList:[],
				cemeteryTel:"",
				profiles:"",
				logoPath:"",
				activeIndex:1,
			}
		},
		created() {
			this.init()
		},
		components: {
            swiper, swiperSlide
        },
        computed: mapState({ user: state => state.user }),
		watch:{
		},
		mounted(){
		},
		methods:{
			init(){
				var this_ = this;
				this.swiperOption={
					slidesPerView:1,
                    slidesPerColumn: 1,
					autoplayDisableOnInteraction:false,
					autoplay:2000,
					onSlideChangeStart(swiper){
						this_.activeIndex = swiper.activeIndex + 1;
					}
				}
                this.$http.get(this.hosturl+"/unsecured/mobile/aboutCemetery?qrCode="+this.$route.query.qrCode)
				.then((response) => {
					if(response.body.status == 1){
						this.cemeteryName = response.body.cemeteryName;//陵园名称
						this.cemeteryShowPicList = response.body.cemeteryShowPicList ? response.body.cemeteryShowPicList : [];//轮播图
						this.cemeteryTel = response.body.cemeteryTel;//陵园电话
						this.profiles =  response.body.profile;//陵园简介
						this.logoPath =  response.body.logoPath;//陵园logo
					}else{
						//接口出问题跳转异常页面
						this.$router.push({ path: '/interfaceException'});
					}
				})
				.catch(function (response) {
				})
			},
			goMap(){
				this.$router.push({ path: '/map',query:{"cemeteryId":this.$route.query.cemeteryId}});
			}
			
		}
    }
</script>
